
<template>
    <div>
        <div class="videoupload">
            <!-- action必选参数, 上传的地址 -->
            <el-upload class="avatar-uploader el-upload--text" :headers="header_url"
                :disabled="tempSrc != '' && !isFactor && isFactorVideo" :action="action_url" :show-file-list="false"
                :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess"
                accept=".mp4">
                <i v-if="!tempSrc && videoFlag == false" class="el-icon-plus" style="
                        display: flex;
                        margin-left: 300px;
                        font-size: 22px;
                        font-weight: bold;
                    "></i>
                <el-progress v-if="videoFlag == true" type="circle" :style="boxStyle"
                    :percentage="videoUploadPercent" />
                <div style="position: relative;" :style="{
                    visibility: tempSrc ? 'visible' : 'hidden'
                }">
                    <i @click.stop="clearVideo" v-if="isFactor || (!isFactor && !isFactorVideo)"
                        class="el-icon-circle-close" style="
                            color: red;
                            font-size: 22px;
                            font-weight: bold;
                            top: 12px;
                            position: absolute;
                            right: -22px;
                        "></i>
                    <video ref="videoPlay" :src="src" width="290" height="203" style="background-color: black"
                        controls="controls">
                        您的浏览器不支持视频播放
                    </video>
                </div>
            </el-upload>
        </div>
    </div>
</template>

<script>
import { Upload } from 'element-ui'
export default {
    props: {
        src: String,
        isFactor: {
            // 是否是厂商默认是
            type: Boolean,
            default: true
        },
        isFactorVideo: {
            // 视频是否是厂商的，默认是
            type: Boolean,
            default: true
        },
        boxStyle: {
            type: Object,
            default () {
                return {
                    'margin-left': '300px',
                }
            }
        },
    },
    model: {
        prop: 'src',
        event: 'returnBack'
    },
    data () {
        return {
            // action:
            //     window.SITE_CONFIG.baseUrl +
            //     '/sino-resource/oss/endpoint/put-file',
            // headers: {
            //     'Sino-Auth': localStorage.getItem('Sino-Auth')
            // },
            videoFlag: false,
            tempSrc: this.src,
            videoUploadPercent: 0
        }
    },
    methods: {
        clearVideo () {
            // console.log('点击删除图标')
            this.tempSrc = ''
            this.$emit('returnBack', '')
        },
        handleVideoSuccess (res, file) {
            //获取上传文件地址
            // console.log('res', res)
            this.videoFlag = false
            this.videoUploadPercent = 0
            if (res.data?.url) {
                // console.log('res.data.link', res.data.url)
                this.commonUpdateSrc(res.data.url)
                // console.log('this.src', this.src)
            } else {
                this.$message.error('视频上传失败，请重新上传！')
            }
        },
        commonUpdateSrc (src) {
            //如果动态切换src地址，也要加上下面的事件（前提是src地址已切换或已重新赋值，再走这个事件）
            this.tempSrc = src
            this.$nextTick(() => {
                let videoRefs = this.$refs.videoPlay
                this.$emit('returnBack', src)
                videoRefs.src = src
                // videoRefs.play()
            })
        },
        uploadVideoProcess (event, file, fileList) {
            // console.log(event.percent, file, fileList)
            this.videoFlag = true
            // this.videoUploadPercent = file.percentage.toFixed(0) * 1
            this.videoUploadPercent = Math.floor(event.percent)
        },
        beforeUploadVideo (file) {
            const isLt40M = file.size / 1024 / 1024 <= 50
            if (['video/mp4'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式')
                return false
            }
            if (!isLt40M) {
                this.$message.error('上传视频大小不能超过50MB!')
                return false
            }
        }
    },
    components: {
        ElUpload: Upload
    }
}
</script>
<style lang="scss" scoped>
.videoupload {
    width: 290px;
    height: 203px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
}

.videoupload {
    ::v-deep .el-upload {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>

